<template>
	<block>
		<scroll-view style="height: 100vh">
			<view class="top" style="height: 8vh">
				<text>
					共
					<text style="color: red">{{ totalNum }}</text>
					件商品
				</text>
				<button v-if="!isEdit" class="edit-btn" @tap="editFun">编辑</button>
				<button v-else class="edit-btn" @tap="editFun">完成</button>
			</view>
			<view style="height: 73vh">
			<scroll-view scroll-y class="list" style="height: 73vh">
				<view class="item" v-if="!isEdit" v-for="(item, index) in list" :key="index">
					<view v-if="isEdit" class="label" @tap="labelFun" :data-id="item._id">
						<image v-if="item.select" src="/static/images/choice_y.png"></image>
						<image v-else src="/static/images/choice_n.png"></image>
					</view>

					<navigator class="content" hover-class="none" :url="'/pages/details/details?id=' + item.product_id">
						<image :src="'http://1.14.101.56:82/'+item.product_picture"></image>
						<view class="text">
							<view class="title">{{ item.product_name }}</view>
							<view class="spec">{{ item.spec }}</view>
							<view class="price">
								<text>¥{{ item.product_price }}</text>
							</view>
						</view>
					</navigator>
				</view>
				<view class="item edit" v-if="isEdit" v-for="(item, index) in list" :key="index">
					<view class="label" @tap="labelFun(item.product_id)" :data-id="item.product_id" v-if="isEdit">
						<image v-if="item.select" src="/static/images/choice_y.png"></image>
						<image v-else src="/static/images/choice_n.png"></image>
					</view>

					<view class="content">
						<image :src="'http://1.14.101.56:82'+item.product_picture"></image>
						<view class="text">
							<view class="title">{{ item.product_name }}</view>
							<view class="spec">{{ item.spec }}</view>
							<view class="price">
								<text>¥{{ item.product_price }}</text>
							</view>
						</view>
					</view>

					<view class="del-btn" @tap="delCollectionItemFun(index,item)" :data-id="item.product_id" :data-item="item">取消收藏
					</view>
				</view>
			</scroll-view>
			</view>
			<view class="bottom" style="height: 10vh" v-if="isEdit">
				<view class="left">
					<view class="text">
						<view class="label" style="padding-left: 16px" @tap="totalFun">
							<image v-if="total" src="/static/images/choice_y.png"></image>
							<image v-else src="/static/images/choice_n.png"></image>
						</view>
						<text @tap="totalFun" style="padding-left: 10px">全选</text>
					</view>
				</view>
				<button class="delCollection" size="mini" @tap="delCollectionFun">取消收藏</button>
			</view>
		</scroll-view>
	</block>
</template>

<script>
	let select_list = [];
	let goodsId_list = [];
	export default {
		data() {
			return {
				total: false,
				//是否全选
				totalNum: 0,
				//商品总数
				list: [],
				isEdit: false,
				userid: ""
			};
		},
		onLoad: function() {
			var that = this;
			var totalnum = 0;

			const id = uni.getStorageSync("userid")
			console.log(id)
			uni.request({
				url: "/api/user/collect/getCollect",
				method: "POST",
				data: {
					"user_id": id
				},
				success: (res) => {
					console.log(res);
					const collectList = res.data.collectList
					
					for (var i = 0; i < collectList.length; i++) {
						
							totalnum++;
						
					}
					// console.log("查询成功",res)
					that.list = collectList,
					that.totalNum = totalnum
					// console.log("查询成功", res.data)
				},
				fail: (res) => {
					console.log('查询失败', res);
				},
			})

		},
		methods: {
			delCollectionItemFun: function(index,item) {
			let userid=uni.getStorageSync("userid")
			var totalnum = 0;
				console.log(item)
				//单个取消收藏
				var that = this;
				var list = [];
				var listTotal = [];
				uni.showModal({
					title: '确定取消收藏？',
					success: function(res) {
						if (res.confirm) {
							//这里是点击了确定以后
							console.log('用户点击确定');
									uni.request({
										url: "/api/user/collect/deleteCollect",
										method: "POST",
										data: {
											user_id: userid,
											product_id: item.product_id
										},
										success: function(res) {
											// count--
											// // console.log("删除成功", select_list)
											// console.log(count)
											// that.setData({
									  // 	      totalNum: count
											// })
											uni.showToast({
												title: '取消收藏成功！',
												icon: 'success',
												duration: 2000
											});
										},
										fail(res) {
											console.log('删除失败', res);
										}
									});
							that.setData({
								list: that.list,
								totalNum: --that.totalNum,
								
								
							});
							
						} else {
							//这里是点击了取消以后
							console.log('用户点击取消');
						}
					}
				});
			},

			delCollectionFun: function(e) {
				// 取消选中收藏
				var that = this;
				let count = that.totalNum;

				if (select_list.length == 0) {
					console.log('请选择一个商品再进行操作哦~');
				} else {
					uni.showModal({
						title: '确定取消收藏？',
						success: function(res) {
							if (res.confirm) {
								//这里是点击了确定以后
								console.log('用户点击确定'); // console.log(select_list)

								for (var i = 0; i < select_list.length; i++) {
									uni.request({
										url:"/api/user/collect/deleteCollect",
										method:"POST",
										data: {
											user_id: userid,
											product_id: item.product_id
										},
											success(res) {
												count--; // console.log("删除成功", select_list)

												console.log(count);
												that.setData({
													totalNum: count
												});

													uni.showToast({
														title: '取消收藏成功！',
														icon: 'success',
														duration: 2000
													});
													
												},
											

											fail(res) {
												console.log('删除失败', res);
											}
										});
								}
								

								var list = []; // console.log(select_list)

								that.list.map((v, k) => {
									if (!v.select) {
										list.push(v);
									}
								});
								that.setData({
									list: list
								});
							} else {
								//这里是点击了取消以后
								console.log('用户点击取消');
							}
						}
					});
				}
			},

			labelFun: function(e,product_id) {
				console.log(product_id);
				//单选
				var that = this;
				var num = 0;

				for (var i = 0; i < that.list.length; i++) {
					if (product_id == e) {
						if (!that.list[i].select) {
							that.list[i].select = true;
							select_list.push(e.currentTarget.dataset.id);
						} else {
							that.list[i].select = !that.list[i].select;
							select_list.splice(
								select_list.findIndex((index) => index === e.currentTarget.dataset.id),
								1
							); // for(var i = 0;i < select_list.length;i++){
							// if(select_list[i] == e.currentTarget.dataset.id){
							// select_list.splice(i,1)
							// }
							// }
						}

						that.setData({
							list: that.list
						});
					}

					if (that.list[i].select) {
						num++;

						if (num == that.list.length) {
							that.setData({
								total: true
							});
						} else {
							that.setData({
								total: false
							});
						}
					}
				}
			},

			totalFun: function(e) {
				//全选
				select_list.splice(
					select_list.findIndex((index) => index === e.currentTarget.dataset.id),
					1
				);
				this.total = !this.total;
				this.list.map((v, k) => {
					if (this.total) {
						v.select = true;
						select_list.push(v.goods_id);
					} else {
						v.select = false;
						select_list = [];
					}
				});
				this.setData({
					list: this.list,
					total: this.total
				});
			},

			editFun: function(e) {
				//编辑按钮
				var that = this;
				that.setData({
					isEdit: !that.isEdit
				});
			}
		}
	};
</script>
<style>
	/* pages/cart/index.wxss */
	.top {
		display: flex;
		line-height: 44px;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;
		font-size: 14px;
		padding: 0 16px;
		align-items: center;
	}

	.top text {
		flex: 5;
		color: #999;
	}

	.top .edit-btn {
		right: -10px;
		background-color: transparent;
		font-size: 14px;
		text-align: center;
		width: 50px;
		color: #6ea1f5;
		flex: 1;
	}

	.label {
		width: 20px;
		height: 20px;
	}

	.label image {
		display: block;
		width: 20px;
		height: 20px;
	}

	.list .item {
		display: flex;
		border-bottom: 1px solid #ededed;
		padding: 0 16px;
		height: 118px;
		align-items: center;
	}

	.list .label {
		flex: 0 0 auto;
		padding: 10px 0;
	}

	.list .content {
		flex-grow: 1;
		display: flex;
	}

	.list .content image {
		flex: 0 0 auto;
		height: 94px;
		width: 94px;
		padding: 10px;
	}

	.list .content .text {
		flex-grow: 1;
		font-size: 14px;
	}

	.list .content .title {
		height: 44px;
		overflow: hidden;
	}

	.list .content .spec {
		font-size: 12px;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-height: 24px;
		max-height: 24px;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list .content .price {
		display: flex;
		font-size: 14px;
		padding-top: 10px;
	}

	.list .content .price text:nth-child(1) {
		color: #ef9b9b;
		flex: 1 0 50%;
	}

	.list .content .price text:nth-child(2) {
		color: #999999;
		flex: 1 0 50%;
		text-align: right;
	}

	.bottom {
		display: flex;
		font-size: 14px;
	}

	.bottom .delCollection {
		top: 3px;
		height: 50px;
		margin-right: 10px;
		line-height: 50px;
		width: 100px;
		background: #ef9b9b;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}

	.bottom .left {
		display: flex;
		flex: 1 0 70%;
		align-items: center;
	}

	.bottom .left .text {
		display: flex;
		flex: 0 0 50%;
	}

	.bottom .left .total-price {
		flex: 0 0 50%;
		color: #333333;
		text-align: right;
	}

	.bottom .right {
		flex: 1 0 30%;
		background: #ef9b9b;
		font-size: 17px;
		color: #ffffff;
		text-align: center;
		line-height: 10vh;
	}

	.edit {
		padding-right: 0px !important;
	}

	.edit .content {
		width: 80%;
	}

	.edit .title {
		display: flex;
		width: 70%;
		line-height: 32px;
		text-align: center;
		height: 32px !important;
		margin: 5px 0;
	}

	.edit .title input {
		flex: 1 0 33.333%;
		border-left: 1px solid #d5d5d5;
		border-right: 1px solid #d5d5d5;
		height: 32px;
	}

	.edit .title text {
		flex: 1 0 33.333%;
		height: 32px;
		font-size: 18px;
	}

	.edit .del-btn {
		margin-right: 0px;
		line-height: 119px;
		width: 65px;
		background: #ef9b9b;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}

	/* 
  .prohibit{
    background: #E5E5E5 !important;
  } */
</style>
